<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css   样式思路：
			 1.通配选择器：微软雅黑、#f5f5f5、浅灰、外边距至0
			 2.#product_card  : 边框、内边距 、外边距、阴影【透明.1】、文字居中
			 3.img:边框倒角   、内外边距？【微调】
			 4.h3： 颜色  、内外边距【微调】
			 5.p：字体大小、 颜色
			 6.p+span： span、内外边距？【微调】、颜色
			 */
			#product_card{
							width: 300px;
							height: 550px;
							background: #f5f5f5;
							border-top: 1px;
							border-radius: 5px;
							box-shadow: 1px 1px 5px 5px rgba(205, 205, 205, 0.5);
						}
						img{
							border-radius: 30px;
							padding: 20px 25px 20px;
						}
						h3{
							border-top-color: #000000;
							text-align: center;
						}
						p{
							color: #d90000;
							text-align: center;
						}
						#p1{
							color: #9d9d9d;
							text-align: center;
						} 
			#card{
						   margin-top: 100px;
						   width: 400px;
						   height: 50px;
						   border: 1px solid #cbcbcb;
						   box-shadow: 1px 1px 5px 5px #d4d4d4;
					   }
					   #commodity{
						   margin-left: 10px;
						   color: #c1c1c1;
					   }
					   #rectangle{
						  position: relative;
						   background-color: red;
						   top: -50px;
						   height: 35px;
						   width: 70px;
						   margin-left: 300px;
					   }
					   #search{
						   color: #f5f5f5;
						   text-align: center;
					   }
					  
		</style>
	</head>
	<body>
		<!-- 网页： 1.html 结构【原生图分析】 -->
		<div id="product_card">
					<img src="img/小米su7.jpg"  width="249px" height="350px" alt="xiaomi" />
					<h3>小米SU7</h3>
					<p>￥279999.00</p >
					<p id="p1">已有<span>10万+</span>评价</p >
				</div>
				
				<div id="card">
				<p id="commodity">搜索 京东商品</p >
				<div id="rectangle"><h3 id="search">搜索</h3></div>
				</div>
			
</html>